import { Download, ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { t, tOpt } from '@/i18n';
import { api, isNotBuilt, isNotFound, safe } from '@/lib/api';
import { apiAnalytics } from '@/lib/api-analytics';
import { apiExplore } from '@/lib/api-explore';
import { formatDate, formatPct, formatValue, grouped, isNum } from '@/lib/format';
import { jsonLd, jsonLdString, seoTitle } from '@/lib/seo';
import { SITE_URL, routes } from '@/lib/site';
import { topicById } from '@/lib/topics';
import type { CountrySummary, FormatSpec, Series } from '@/lib/types';
import type { FramesResponse } from '@/lib/types-analytics';
import type { IndicatorResponse, RankedValue } from '@/lib/types-explore';
import { RankRace } from '@/components/charts/rank-race';
import { RankedBars, rankedRowFromCountry, type RankedBarRow } from '@/components/charts/ranked-bars';
import { EmptyState, NotBuiltState } from '@/components/data/empty-state';
import type { ProvenancePayload } from '@/components/data/provenance-context';
import { QualityBadges } from '@/components/data/quality-badge';
import { Section } from '@/components/data/section';
import { CodeBlock } from '@/components/explore/copy-button';
import { ACTION_CLS, PageHeader } from '@/components/explore/page-header';
import { DistributionPanel } from '@/components/indicators/distribution-panel';
import { IndicatorCompare, type CompareCountry } from '@/components/indicators/indicator-compare';
import { IndicatorMap } from '@/components/indicators/indicator-map';
import { IndicatorTrend } from '@/components/indicators/indicator-trend';
import { baseFeatures } from '@/components/indicators/map-geometry';
import { RelatedTable } from '@/components/indicators/related-table';

export const revalidate = 900;

type Params = { slug: string };
type SP = Record<string, string | string[] | undefined>;

async function load(slug: string): Promise<IndicatorResponse | 'not-built' | null> {
  try {
    return await apiExplore.indicator(slug);
  } catch (e) {
    if (isNotFound(e)) return null;
    if (isNotBuilt(e)) return 'not-built';
    throw e;
  }
}

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { slug } = await params;
  const data = await load(slug);
  if (!data || data === 'not-built') return { title: t('indicator.notFound'), robots: { index: false } };
  const ind = data.indicator;
  const name = titleCase(ind.short_name ?? ind.name ?? slug);
  const title = seoTitle.indicator(name);
  const description = t('indicator.description', { name: ind.name ?? name, unit: ind.unit ?? '', n: data.coverage.n_countries ?? 0, y0: data.years.first ?? '', y1: data.years.last_actual ?? data.years.last ?? '' });
  const canonical = routes.indicator(ind.slug);
  return {
    title: { absolute: `${title} | ${t('site.name')}` },
    description,
    alternates: { canonical },
    openGraph: { title: `${title} | ${t('site.name')}`, description, url: canonical, type: 'article' },
    twitter: { card: 'summary_large_image', title, description },
  };
}

/** "Life expectancy" → "Life Expectancy"; keeps acronyms (GDP, CO₂) and short function words lower-case. */
function titleCase(s: string): string {
  const small = new Set(['of', 'per', 'to', 'in', 'at', 'by', 'and', 'or', 'the', 'a', 'an', 'vs', 'on', 'for', 'as']);
  return s
    .split(' ')
    .map((w, i) => (i > 0 && small.has(w.toLowerCase()) ? w.toLowerCase() : w === w.toUpperCase() ? w : w.charAt(0).toUpperCase() + w.slice(1)))
    .join(' ');
}

function specOf(ind: IndicatorResponse['indicator']): FormatSpec {
  return { format: ind.format, unit: ind.unit, unit_short: ind.unit_short, precision: ind.precision, frequency: ind.frequency, name: ind.short_name ?? ind.name, higher_is_better: ind.higher_is_better };
}

/** 10-year movers from the frames payload: change between the latest frame and the frame ten years earlier (± 2). */
function decadeMovers(frames: FramesResponse | null, countries: Map<string, CountrySummary>, hib: boolean | null | undefined, relative: boolean): { up: RankedBarRow[]; down: RankedBarRow[]; from: number; to: number } | null {
  if (!frames || frames.years.length < 11) return null;
  const years = frames.years;
  const toIdx = years.length - 1;
  const to = years[toIdx]!;
  let fromIdx = years.findIndex((y) => y >= to - 10);
  if (fromIdx < 0 || fromIdx === toIdx) return null;
  if (years[fromIdx]! > to - 8) fromIdx = Math.max(0, fromIdx - 1);
  const from = years[fromIdx]!;
  const rows: Array<{ id: string; delta: number; v0: number; v1: number }> = [];
  for (const [iso, arr] of Object.entries(frames.values)) {
    const v1 = arr[toIdx];
    const v0 = arr[fromIdx];
    if (typeof v1 !== 'number' || typeof v0 !== 'number') continue;
    const pop = countries.get(iso)?.population_latest ?? 0;
    if (pop < 1_000_000) continue;
    const delta = relative ? (v0 !== 0 ? ((v1 - v0) / Math.abs(v0)) * 100 : NaN) : v1 - v0;
    if (!Number.isFinite(delta)) continue;
    rows.push({ id: iso, delta, v0, v1 });
  }
  if (rows.length < 10) return null;
  const sorted = [...rows].sort((a, b) => b.delta - a.delta);
  const mk = (r: { id: string; delta: number; v0: number; v1: number }, i: number): RankedBarRow => {
    const c = countries.get(r.id);
    return { id: r.id, label: c?.name ?? r.id, flag: c?.flag ?? null, href: c?.slug ? routes.country(c.slug) : null, value: r.delta, rank: i + 1 };
  };
  const up = sorted.slice(0, 6).map(mk);
  const down = sorted.slice(-6).reverse().map(mk);
  // Direction semantics: when higher is better, "up" is the improvement list; when lower is better, swap.
  return { up: hib === false ? down : up, down: hib === false ? up : down, from, to };
}

export default async function IndicatorPage({ params, searchParams }: { params: Promise<Params>; searchParams: Promise<SP> }) {
  const [{ slug }, sp] = await Promise.all([params, searchParams]);
  const data = await load(slug);
  if (data === null) notFound();
  if (data === 'not-built') return <NotBuiltState />;

  const ind = data.indicator;
  const name = ind.name ?? ind.slug;
  const spec = specOf(ind);
  const yearUsed = data.years.latest_common ?? data.world_latest?.year ?? data.years.last_actual ?? null;
  const highlight = typeof sp.country === 'string' && /^[a-z0-9-]+$/i.test(sp.country) ? sp.country : null;

  const [countriesRes, frames, trend, related, quality, distribution, race] = await Promise.all([
    safe(api.countries()),
    safe(apiAnalytics.indicatorFrames(ind.slug)),
    safe(apiExplore.indicatorTrend(ind.slug, 'world')),
    safe(apiAnalytics.indicatorRelated(ind.slug, { limit: 10 })),
    safe(apiAnalytics.indicatorQuality(ind.slug)),
    safe(apiAnalytics.indicatorDistribution(ind.slug, { highlight })),
    ind.ranking_eligible !== false ? safe(apiAnalytics.race(ind.slug, { top: 10 })) : Promise.resolve(null),
  ]);
  const countries = countriesRes?.items ?? [];
  const onlyCountries = countries.filter((c) => (c.kind ?? 'country') === 'country');
  const byId = new Map(countries.map((c) => [c.id, c]));

  // Default comparison: the 3 largest economies that have data for this indicator.
  const lastIdx = frames ? frames.years.length - 1 : -1;
  const hasValue = (id: string) => (frames && lastIdx >= 0 ? typeof frames.values[id]?.[lastIdx] === 'number' : false);
  const defaults: CompareCountry[] = [...onlyCountries]
    .filter((c) => isNum(c.gdp_latest) && hasValue(c.id))
    .sort((a, b) => (b.gdp_latest ?? 0) - (a.gdp_latest ?? 0))
    .slice(0, 3)
    .map((c) => ({ id: c.id, slug: c.slug ?? c.id, name: c.name ?? c.id, flag: c.flag }));
  const bundle = defaults.length ? await safe(apiExplore.seriesBundle(defaults.map((c) => c.id), [ind.slug])) : null;
  const initialSeries: Series[] = bundle?.series ?? [];
  const { features, sphere } = countries.length ? baseFeatures(countries) : { features: [], sphere: '' };

  const wl = data.world_latest;
  const worldPayload: ProvenancePayload = {
    indicator: { slug: ind.slug, name, format: ind.format, unit: ind.unit, unit_short: ind.unit_short, frequency: ind.frequency, higher_is_better: ind.higher_is_better, methodology: ind.methodology, description: ind.description },
    value: wl ? { value: wl.value, formatted: wl.formatted, period: wl.year ? `${wl.year}-01-01` : null, year: wl.year, unit: ind.unit, provenance: frames?.provenance ?? data.top5[0]?.provenance ?? null } : null,
    country: null,
    downloadHref: routes.indicatorDownload(ind.slug),
  };

  const hib = ind.higher_is_better;
  const topLabel = hib == null ? t('indicator.top.highest') : t('indicator.top.best');
  const bottomLabel = hib == null ? t('indicator.top.lowest') : t('indicator.top.worst');
  const toRows = (rows: RankedValue[]) => rows.map((r) => rankedRowFromCountry(r.country, r.value, r.rank));
  const relative = ['currency', 'number', 'tonnes', 'kwh'].includes(ind.format ?? '');
  const movers = decadeMovers(frames, byId, hib, relative);
  const deltaSpec: FormatSpec = relative ? { format: 'percent', precision: 0, unit: '%' } : { format: ind.format === 'percent' || ind.format === 'years' || ind.format === 'index' || ind.format === 'ratio' ? ind.format : ind.format, unit: ind.unit, unit_short: ind.unit_short, precision: ind.precision };

  const missing: CountrySummary[] = frames && lastIdx >= 0 ? onlyCountries.filter((c) => !hasValue(c.id)).sort((a, b) => (b.population_latest ?? 0) - (a.population_latest ?? 0)) : [];
  const topic = topicById(ind.topic ?? '');
  const apiSnippet = `curl -s "${SITE_URL}/api/v1/series?country=CAN&indicator=${ind.slug}" | jq '.series[0] | {country: .country.name, unit, last: .stats.last, source: .provenance.source_name}'`;
  const freqLabel = tOpt(`indicator.frequency.${ind.frequency ?? 'A'}`, ind.frequency ?? 'A');
  const worldKindLabel = wl ? tOpt(`indicator.world.${wl.kind}`, t('indicator.world', { kind: wl.kind })) : null;
  const ld = [
    jsonLd.dataset({ slug: ind.slug, name: ind.name ?? name, description: ind.description, unit: ind.unit, firstYear: data.years.first, lastYear: data.years.last_actual, nCountries: data.coverage.n_countries, sources: data.sources.map((s) => ({ name: s.source_name, url: s.url, licence: s.licence })), modified: data.meta.built_at }),
    jsonLd.breadcrumbs([{ name: t('indicators.title'), path: routes.indicators() }, ...(topic ? [{ name: topic.short, path: routes.indicators(topic.id) }] : []), { name: ind.short_name ?? name, path: routes.indicator(ind.slug) }]),
  ];

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLdString(ld) }} />
      <PageHeader
        crumbs={[{ href: routes.indicators(), label: t('indicators.title') }, ...(topic ? [{ href: routes.indicators(topic.id), label: topic.short }] : [])]}
        eyebrow={[topic?.name, ind.subtopic].filter(Boolean).join(' · ')}
        title={name}
        lede={ind.description}
        meta={
          <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <span>
              {ind.unit} · {freqLabel} · {t('indicator.coverage', { n: grouped(data.coverage.n_countries ?? 0), total: grouped(data.coverage.n_countries_total), pct: formatPct(data.coverage.coverage_pct) })}
              {data.years.first && data.years.last_actual ? ` · ${data.years.first}–${data.years.last_actual}` : ''}
              {data.sources[0]?.source_name ? ` · ${data.sources[0].source_name}` : ''}
            </span>
            <QualityBadges badges={quality?.badges ?? null} />
          </span>
        }
        actions={
          <>
            {ind.ranking_eligible !== false ? (
              <Link href={routes.ranking(ind.slug)} className={ACTION_CLS}>
                {t('common.ranking')}
              </Link>
            ) : null}
            <Link href={routes.explore({ indicator: ind.slug })} className={ACTION_CLS}>
              {t('nav.explore')}
            </Link>
            <a href={routes.indicatorDownload(ind.slug)} className={ACTION_CLS}>
              <Download size={14} aria-hidden /> {t('common.downloadCsv')}
            </a>
          </>
        }
      />

      {/* World figure + freshness */}
      <section aria-label={t('indicator.freshness')} className="border-y border-rule">
        <dl className="grid grid-cols-2 gap-y-4 py-4 sm:grid-cols-4 lg:divide-x lg:divide-rule">
          <div className="col-span-2 sm:col-span-1 lg:pr-4">
            <dt className="eyebrow">{worldKindLabel ?? t('indicator.world.median')}</dt>
            <dd className="pnum mt-1 text-2xl font-semibold leading-none text-ink md:text-3xl">{formatValue(wl?.value, spec)}</dd>
            {wl?.year ? <dd className="tnum mt-1 text-xs text-ink-3">{t('indicator.world.n', { n: grouped(wl.n ?? 0), year: wl.year })}</dd> : null}
          </div>
          <div className="lg:px-4">
            <dt className="eyebrow">{t('indicator.freshness.latest')}</dt>
            <dd className="tnum mt-1 text-base font-semibold text-ink">{data.years.last_actual ?? t('common.na')}</dd>
            {data.years.last && data.years.last_actual && data.years.last > data.years.last_actual ? <dd className="text-2xs text-ink-3">{t('common.forecast')} → {data.years.last}</dd> : null}
            {quality ? <dd className="tnum text-2xs text-ink-3">{t('indicator.quality.years', { n: quality.years_with_50plus })}</dd> : null}
          </div>
          <div className="lg:px-4">
            <dt className="eyebrow">{t('indicator.freshness.source')}</dt>
            <dd className="tnum mt-1 text-base font-semibold text-ink">{formatDate(data.freshness.source_updated_at)}</dd>
            {quality ? <dd className="tnum text-2xs text-ink-3">{t('indicator.quality.flagged', { n: grouped(quality.flagged_values) })}</dd> : null}
          </div>
          <div className="lg:pl-4">
            <dt className="eyebrow">{t('indicator.freshness.refreshed')}</dt>
            <dd className="tnum mt-1 text-base font-semibold text-ink">{formatDate(data.freshness.retrieved_at ?? data.freshness.built_at)}</dd>
            {data.meta.run_id ? <dd className="text-2xs text-ink-3">{t('site.footer.build', { run: data.meta.run_id })}</dd> : null}
          </div>
        </dl>
      </section>

      <Section id="map" title={t('indicator.map.title')} subtitle={t('indicator.map.sub')} className="border-t-0">
        {features.length ? <IndicatorMap slug={ind.slug} geometry={features} sphere={sphere} frames={frames} spec={spec} payload={worldPayload} initialYear={yearUsed} /> : <EmptyState title={t('common.noDataLong')} />}
      </Section>

      <Section id="trend" title={t('indicator.trend.title')} subtitle={t('indicator.trend.sub')}>
        <IndicatorTrend slug={ind.slug} initial={trend} spec={spec} payload={worldPayload} />
      </Section>

      <Section id="top" title={t('indicator.top.title')} subtitle={yearUsed ? t('indicator.top.sub', { year: yearUsed }) : undefined} actions={ind.ranking_eligible !== false ? <Link href={routes.ranking(ind.slug)} className="text-accent hover:underline">{t('indicator.top.fullRanking')} →</Link> : null}>
        {data.top5.length === 0 ? (
          <EmptyState compact title={t('common.noDataLong')} />
        ) : (
          <div className="grid gap-x-10 gap-y-6 lg:grid-cols-2">
            <div>
              <h3 className="mb-2 text-sm font-semibold text-ink">{topLabel}</h3>
              <RankedBars rows={toRows(data.top5)} spec={spec} provenance={data.top5[0]?.provenance ?? null} />
            </div>
            {data.bottom5.length ? (
              <div>
                <h3 className="mb-2 text-sm font-semibold text-ink">{bottomLabel}</h3>
                <RankedBars rows={toRows(data.bottom5)} spec={spec} provenance={data.bottom5[0]?.provenance ?? null} />
              </div>
            ) : null}
          </div>
        )}
      </Section>

      {movers ? (
        <Section id="movers" title={t('indicator.movers.title', { y0: movers.from, y1: movers.to })} subtitle={hib == null ? t('indicator.movers.subNeutral') : t('indicator.movers.sub')}>
          <div className="grid gap-x-10 gap-y-6 lg:grid-cols-2">
            <div>
              <h3 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-ink">
                <span aria-hidden className={hib == null ? 'text-inc' : 'text-up'}>↑</span> {hib == null ? t('indicator.movers.largestIncrease') : t('indicator.movers.fastestImproving')}
              </h3>
              <RankedBars rows={movers.up} spec={deltaSpec} showRank={false} />
            </div>
            <div>
              <h3 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-ink">
                <span aria-hidden className={hib == null ? 'text-dec' : 'text-down'}>↓</span> {hib == null ? t('indicator.movers.largestDecrease') : t('indicator.movers.fastestDeclining')}
              </h3>
              <RankedBars rows={movers.down} spec={deltaSpec} showRank={false} />
            </div>
          </div>
          <p className="mt-3 text-xs text-ink-3">{t('indicator.movers.note', { y0: movers.from, y1: movers.to, kind: relative ? t('indicator.movers.relative') : t('indicator.movers.absolute') })}</p>
        </Section>
      ) : null}

      {distribution && distribution.n >= 10 ? (
        <Section id="distribution" title={t('indicator.dist.section')} subtitle={t('indicator.dist.sectionSub')}>
          <DistributionPanel data={distribution} spec={spec} />
        </Section>
      ) : null}

      {race && race.frames.length >= 20 ? (
        <Section id="race" title={t('indicator.race.title')} subtitle={t('ranking.race.sub', { name: spec.name ?? name, y0: race.years[0] ?? '', y1: race.years[race.years.length - 1] ?? '', top: race.top })}>
          <RankRace data={race} spec={spec} top={10} initialYear={yearUsed} />
        </Section>
      ) : null}

      <Section id="compare" title={t('indicator.compare.title')} subtitle={t('indicator.compare.sub')}>
        <IndicatorCompare slug={ind.slug} spec={spec} initialCountries={defaults} initialSeries={initialSeries} payload={worldPayload} />
      </Section>

      <Section id="related" title={t('indicator.related.statTitle')} subtitle={t('indicator.related.statSub')} actions={<Link href={routes.scatter({ x: ind.slug })} className="text-accent hover:underline">{t('indicator.related.openScatter')} →</Link>}>
        {related ? <RelatedTable data={related} slug={ind.slug} /> : <p className="text-sm text-ink-3">{t('indicator.related.noneStat')}</p>}
      </Section>

      <Section id="definition" title={t('indicator.definition')} level={2}>
        <dl className="grid gap-x-8 gap-y-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
          <div>
            <dt className="eyebrow">{t('indicator.definition')}</dt>
            <dd className="mt-0.5 text-ink-2">{ind.description ?? t('common.na')}</dd>
          </div>
          {ind.methodology ? (
            <div>
              <dt className="eyebrow">{t('indicator.methodology')}</dt>
              <dd className="mt-0.5 text-ink-2">{ind.methodology}</dd>
            </div>
          ) : null}
          <div>
            <dt className="eyebrow">{t('indicator.unit')}</dt>
            <dd className="mt-0.5 text-ink">
              {ind.unit ?? t('common.na')}
              {ind.unit_short && ind.unit_short !== ind.unit ? <span className="text-ink-3"> ({ind.unit_short})</span> : null}
            </dd>
          </div>
          <div>
            <dt className="eyebrow">{t('indicator.frequency')}</dt>
            <dd className="mt-0.5 text-ink">{freqLabel}</dd>
          </div>
          <div>
            <dt className="eyebrow">{t('indicator.aggregation')}</dt>
            <dd className="mt-0.5 text-ink">
              {ind.aggregation ?? 'none'} · {t(`indicator.higherIsBetter.${hib == null ? 'null' : hib ? 'true' : 'false'}` as 'indicator.higherIsBetter.null')}
            </dd>
          </div>
          {ind.bounds && (ind.bounds[0] != null || ind.bounds[1] != null) ? (
            <div>
              <dt className="eyebrow">{t('indicator.bounds')}</dt>
              <dd className="tnum mt-0.5 text-ink">
                {ind.bounds[0] ?? '−∞'} – {ind.bounds[1] ?? '∞'}
              </dd>
            </div>
          ) : null}
        </dl>
      </Section>

      <Section id="sources" title={t('indicator.sources.title')} subtitle={t('indicator.sources.sub')}>
        <ol className="divide-y divide-rule border-y border-rule">
          {data.sources.map((s) => (
            <li key={`${s.source_id}-${s.series_code}`} className="grid gap-x-6 gap-y-1 py-3 sm:grid-cols-[2.5rem_minmax(0,1fr)_auto] sm:items-start">
              <span className="tnum text-xs text-ink-3">
                <span className="sr-only">{t('indicator.sources.priority')} </span>#{s.priority ?? '—'}
              </span>
              <div className="min-w-0 text-sm">
                <div className="flex flex-wrap items-baseline gap-x-2">
                  <Link href={routes.source(s.source_id)} className="link-quiet inline-flex min-h-[44px] items-center font-medium text-ink md:min-h-0">
                    {s.source_name ?? s.source_id}
                  </Link>
                  <span className="text-ink-3">{s.dataset}</span>
                  <code className="break-all rounded-xs bg-surface-2 px-1 font-mono text-xs text-ink-2">{s.series_code}</code>
                  {s.last_status ? <span className="text-2xs uppercase tracking-wide text-ink-3">{s.last_status}</span> : null}
                </div>
                <div className="tnum mt-0.5 text-xs text-ink-3">
                  {s.n_countries != null ? t('indicators.coverageShort', { n: grouped(s.n_countries) }) : ''}
                  {s.n_observations != null ? ` · ${grouped(s.n_observations)} obs.` : ''}
                  {s.last_year ? ` · → ${s.last_year}` : ''}
                  {s.licence ? ` · ${s.licence}` : ''}
                  {s.transform ? ` · ${t('indicator.sources.transform', { expr: s.transform })}` : ''}
                  {s.countries?.length ? ` · ${t('indicator.sources.restricted', { n: s.countries.length })}` : ''}
                </div>
                {s.notes ? <p className="mt-1 line-clamp-2 text-xs text-ink-3">{s.notes}</p> : null}
              </div>
              {s.url ? (
                <a href={s.url} target="_blank" rel="noopener noreferrer" className="inline-flex min-h-[44px] items-center gap-1 text-xs text-accent hover:underline md:min-h-[32px]">
                  <ExternalLink size={12} aria-hidden /> {t('indicator.sources.open')}
                </a>
              ) : null}
            </li>
          ))}
        </ol>
        <p className="mt-3 max-w-prose text-xs leading-relaxed text-ink-3">{t('indicator.sources.rule')}</p>
      </Section>

      <div className="grid gap-x-10 lg:grid-cols-2">
        <Section id="no-data" title={t('indicator.nodata.title')} subtitle={frames && yearUsed ? (missing.length ? t('indicator.nodata.sub', { n: grouped(missing.length), total: grouped(onlyCountries.length), year: frames.years[lastIdx] ?? yearUsed }) : t('indicator.nodata.none', { year: frames.years[lastIdx] ?? yearUsed })) : undefined}>
          {missing.length ? (
            <>
              <ul className="flex flex-wrap gap-1.5 text-xs">
                {missing.slice(0, 24).map((c) => (
                  <li key={c.id}>
                    <Link href={routes.country(c.slug ?? c.id)} className="inline-flex min-h-[32px] items-center gap-1 rounded-sm border border-rule px-2 text-ink-2 hover:border-accent hover:text-accent">
                      <span aria-hidden>{c.flag}</span> {c.name}
                    </Link>
                  </li>
                ))}
                {missing.length > 24 ? <li className="inline-flex min-h-[32px] items-center px-1 text-ink-3">{t('indicator.nodata.more', { n: missing.length - 24 })}</li> : null}
              </ul>
              <p className="mt-3 max-w-prose text-xs leading-relaxed text-ink-3">{t('indicator.nodata.why')}</p>
            </>
          ) : (
            <p className="text-sm text-ink-2">{t('indicator.nodata.why')}</p>
          )}
        </Section>

        <Section id="downloads" title={t('indicator.downloads.title')} subtitle={t('indicator.downloads.sub')}>
          <div className="flex flex-wrap gap-2">
            <a href={routes.indicatorDownload(ind.slug, 'csv')} className={ACTION_CLS}>
              <Download size={14} aria-hidden /> {t('indicator.downloads.csv')}
            </a>
            <a href={routes.indicatorDownload(ind.slug, 'json')} className={ACTION_CLS}>
              <Download size={14} aria-hidden /> {t('indicator.downloads.json')}
            </a>
            <Link href={routes.download({ indicators: ind.slug })} className={ACTION_CLS}>
              {t('indicator.downloads.builder')}
            </Link>
          </div>
          <h3 className="mt-5 text-sm font-semibold text-ink">{t('indicator.downloads.api')}</h3>
          <p className="mb-2 text-xs text-ink-3">{t('indicator.downloads.apiHint')}</p>
          <CodeBlock code={apiSnippet} lang="bash" />
          <p className="mt-2 text-xs text-ink-3">
            <Link href={routes.api()} className="text-accent hover:underline">
              {t('data.api.link')} →
            </Link>
          </p>
        </Section>
      </div>
    </>
  );
}